<template>
  <div class="home">
    <!-- <van-nav-bar
      title="扫码填报"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    /> -->
    <!-- <van-nav-bar class="blue" title="入连人员自主报备" /> -->
    <img src="../../assets/images/rlzzbb.png" />
    <van-form validate-first ref="formDataRef" @submit="onSubmit">
      <!-- <div block type="info" class="get-area" @click="testNfc" >刷卡读取身份证信息</div> -->
      <!-- 通过 pattern 进行正则校验 -->
      <van-field
        input-align="right"
        label="姓名"
        maxlength="25"
        required
        v-model="formData.name"
        name="pattern"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '' }]"
      />
      <!-- <van-field
        input-align="right"
        label="性别"
        required
        v-model="formData.sex"
        name="pattern"
        placeholder="请输入性别"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      /> -->
      <van-field
        input-align="right"
        label="证件类型"
        required
        readonly
        v-model="formData.certificatesType"
        name="pattern"
        placeholder="请选择证件类型"
        @focus="select()"
        @click="showCertificate = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-field
        input-align="right"
        label="证件号码"
        required
        maxlength="18"
        v-model="formData.certificatesNo"
        name="pattern"
        placeholder="请输入证件号码"
        :rules="[{ required: true, message: '' }]"
      />

      <van-field
        input-align="right"
        label="手机号"
        type="digit"
        required
        maxlength="11"
        v-model="formData.phone"
        name="phoneRules"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '' }]"
      />

      <!-- { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！' }, -->
      <van-field
        input-align="right"
        label="来连方式"
        required
        readonly
        v-model="formData.comeType"
        :key="new Date().toString()"
        name="pattern"
        placeholder="请选择来连方式"
        @focus="showTrave = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-field
        input-align="right"
        :label="comeColOne"
        v-show="showTwoLabel"
        v-model="formData.comeColOne"
        name="pattern"
        :placeholder="comeColOnePlaceholder"
      />
      <van-field
        input-align="right"
        :label="comeColTwo"
        v-show="showTwoLabel"
        v-model="formData.comeColTwo"
        name="pattern"
        :placeholder="comeColTwoPlaceholder"
      />
      <van-field
        input-align="right"
        :label="comeColThree"
        v-show="showCarriage"
        v-model="formData.comeColThree"
        name="pattern"
        :placeholder="comeColThreePlaceholder"
      />
      <van-field
        input-align="right"
        v-model="formData.startAddrList"
        readonly
        required
        name="area"
        label="出发地"
        placeholder="点击选择省市区"
        @click="showArea = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onAreaConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field
        input-align="right"
        label="详细地址"
        required
        autosize
        type="textarea"
        maxlength="120"
        rows="1"
        v-model="formData.comeAddress"
        name="pattern"
        placeholder="请输入出发地详细地址"
        :rules="[{ required: true, message: '' }]"
      />

      <van-field
        input-align="right"
        v-model="formData.comeDalianTime"
        required
        name="calendar"
        label="来连日期"
        placeholder="请选择来连日期"
        @click="goDlShow = true"
        @focus="select()"
        :rules="[{ required: true, message: '' }]"
      />
      <van-calendar v-model:show="goDlShow" @confirm="goYjConfirm" />
      <van-field input-align="right" required name="radio" label="是否中转大连">
        <template #input>
          <van-radio-group v-model="zzdl" direction="horizontal">
            <van-radio @click="checkZzdl()" name="1">是</van-radio>
            <van-radio @click="checkZzdl()" name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <van-calendar
        v-model:show="goDlShow"
        @confirm="goDlConfirm"
        :min-date="llminDate"
        :max-date="llmaxDate"
      />

      <van-field
        v-if="!end3"
        input-align="right"
        v-model="formData.endAddrList"
        readonly
        required
        name="area"
        label="目的地"
        placeholder="点击选择省市区"
        @click="showArea2 = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-popup v-model:show="showArea2" position="bottom">
        <!-- value="210200" -->
        <van-area
          v-model="cascaderArea"
          :area-list="areaList"
          @confirm="enAreaConfirm"
          @cancel="showArea2 = false"
        />
      </van-popup>
      <van-field
        v-if="end3"
        input-align="right"
        v-model="formData.endAddrList"
        readonly
        required
        label="目的地"
        placeholder="请选择目的地"
        @click="trave_mode_show = true"
        :rules="[{ required: true, message: '' }]"
      />
      <van-popup v-model:show="trave_mode_show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择目的地"
          :options="options"
          @close="trave_mode_show = false"
          @finish="onFinish"
        />
        <!-- <van-area
          v-model="cascaderValue"
          :area-list="areaList"
          @confirm="onFinish"
          @cancel="trave_mode_show = false"
        /> -->
      </van-popup>
      <!-- <van-field
        input-align="right"
        label="所属社区"
        required
        v-model="formData.codename"
        name="pattern"
        placeholder="请选择所属社区"
        @focus="showCode = true"
        :rules="[{ required: true, message: '请选择所属社区' }]"
      /> -->

      <van-field
        input-align="right"
        label="详细地址"
        required
        autosize
        type="textarea"
        rows="1"
        maxlength="120"
        v-model="formData.address"
        name="pattern"
        placeholder="请输入目的地详细地址"
      />

      <van-field
        input-align="right"
        label="紧急联系人姓名"
        maxlength="25"
        v-model="formData.urgentPname"
        name="pattern"
        placeholder="请输入紧急联系人姓名"
      />
      <van-field
        input-align="right"
        label="紧急联系人手机号"
        type="digit"
        maxlength="11"
        v-model="formData.urgentPhone"
        name="pattern"
        placeholder="请输入紧急联系人手机号"
      />

      <!-- <van-field
        input-align="right"
        label="户口所在地"
        v-model="formData.registered_residence"
        name="pattern"
        placeholder="请输入户口所在地"
      /> -->
      <van-field input-align="right" name="radio" label="途经重点关注地区">
        <template #input>
          <van-radio-group v-model="formData.isKeyArea" direction="horizontal">
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!-- <van-field input-align="right" name="radio" label="人员状态">
        <template #input>
          <van-radio-group
            v-model="formData.type"
            direction="horizontal">
            <van-radio name="1">未排查</van-radio>
            <van-radio name="0">无需排查</van-radio>
          </van-radio-group>
        </template>
      </van-field> -->
      <van-field input-align="right" name="radio" label="48小时核酸证明">
        <template #input>
          <van-radio-group
            v-model="formData.isNucleicAcid"
            direction="horizontal"
          >
            <van-radio name="1">是</van-radio>
            <van-radio name="0">否</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field input-align="right" name="radio" label="健康码状态">
        <template #input>
          <van-radio-group
            v-model="formData.healthyCodeStatus"
            direction="horizontal"
            style="width:11.7rem;"
          >
            <van-radio name="0">绿码</van-radio>
            <van-radio name="1">黄码</van-radio>
            <van-radio name="2">红码</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-cell value="同行人" v-if="formData.daLianRegisterDtos.length <= 0">
        <template #right-icon>
          <van-icon
            style="padding-right: 1rem"
            @click="pushResidentList()"
            name="plus"
            class="search-icon"
            >添加
          </van-icon>
        </template>
      </van-cell>
      <div
        inset
        v-for="(item, index) in formData.daLianRegisterDtos"
        :model="formData"
        :key="index"
        title="同行人"
      >
        <van-cell value="同行人">
          <template #right-icon>
            <van-icon
              style="padding-right: 1rem"
              @click="pushResidentList()"
              name="plus"
              class="search-icon"
              >添加
            </van-icon>
            <van-icon
              @click="removeResident(index)"
              name="cross"
              class="search-icon"
              >删除</van-icon
            >
          </template>
        </van-cell>
        <van-field
          input-align="right"
          label="姓名"
          maxlength="25"
          v-model="formData.daLianRegisterDtos[index].name"
          name="pattern"
          placeholder="请输入姓名"
        />
        <van-field
          input-align="right"
          label="身份证号"
          maxlength="18"
          v-model="formData.daLianRegisterDtos[index].certificatesNo"
          name="pattern"
          placeholder="请输入身份证号"
        />
        <van-field
          input-align="right"
          label="手机号"
          maxlength="11"
          v-model="formData.daLianRegisterDtos[index].phone"
          name="pattern"
          placeholder="请输入手机号"
        />
      </div>
      <van-row>
        <van-col span="24">
          <p style="font-size: 17px">
            &nbsp;&nbsp;&nbsp;健康码、通信行程卡、48小时内核酸检测报告
          </p>
        </van-col>
      </van-row>
      <van-field input-align="right" name="radio" label="">
        <template #input>
          <div :class="postData.length > 2 ? 'upload-img-5' : 'upload-img-1'">
            <div class="posting-uploader">
              <div
                class="posting-uploader-item"
                v-for="(item, nn) in postData"
                :key="nn"
              >
                <img :src="item.content" alt="图片" class="imgPreview" />
                <van-icon name="close" @click="delImg(nn)" class="delte" />
              </div>
              <van-uploader
                :after-read="onRead"
                accept="image/jpeg,image/png"
                multiple
                :max-count="3 - postData.length"
                v-show="postData.length <= 2"
              >
                <!-- <img src="../../assets/img/img1.png" alt="等待传图" class="imgPreview"> -->
                <!-- <img src="" alt="等待传图" class="imgPreview"> -->
              </van-uploader>
            </div>
          </div>
        </template>
      </van-field>
      <div style="margin: 16px">
        <p style="font-size: 12px">
          <van-checkbox v-model="checked" shape="square"
            >我已阅知本申报所列事项，并保证以上报备内容正确属实
          </van-checkbox>
        </p>
      </div>
      <div style="margin: 16px; display: flex">
        <van-button block type="info" native-type="submit">提交</van-button>
        <!-- <van-button block type="info" @click="tupian()">tupian </van-button> -->
      </div>
      <div style="margin: 16px"></div>
      <div id="base64Url"></div>
    </van-form>
    <!-- 省市区弹出 -->
    <van-popup
      v-model="show"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="title">上车{{ title }}</div>
      <div class="container">
        <div
          class="item"
          v-for="(item, index) in forArea"
          :key="index"
          @click="checkoutArea(item)"
        >
          {{ item.name || item }}
        </div>
      </div>
    </van-popup>
    <!-- 性别类型 -->
    <!-- <van-popup v-model="showSex" round position="bottom">
      <van-picker
        show-toolbar
        :columns="sexColumns"
        @cancel="showSex = false"
        @confirm="onSexConfirm"
      />
    </van-popup> -->

    <!-- 出行交通方式类型 -->
    <van-popup v-model="showTrave" round position="bottom">
      <van-picker
        show-toolbar
        :columns="trave_columns"
        @cancel="showTrave = false"
        @confirm="traveConfirm"
      />
    </van-popup>
    <!-- 证件类型 -->
    <van-popup v-model="showCertificate" round position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showCertificate = false"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 社区code -->
    <van-popup v-model="showCode" round position="bottom">
      <van-picker
        show-toolbar
        :columns="showCodeColumns"
        value-key="name"
        @cancel="showCode = false"
        @confirm="onCodeConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import area from '@/libs/area.json'
import { helpUserNewInsert } from '@/api/self/help'
import { registerOfficeList, getSign, upLoadFiles } from '@/api/self/record'
import { Toast, Dialog } from 'vant'
import lrz from 'lrz'
import xeUtils from 'xe-utils'

const date = new Date()
const day = date.getDate()

export default {
  data() {
    return {
      llmaxDate: '',
      llminDate: '',
      zzdl: '0',
      cascaderArea: '',
      cascaderValue: '',
      showCarriage: false,
      trave_mode_show: false,
      showTwoLabel: false,
      checked: false,
      goDlShow: false,
      showArea: false,
      showArea2: false,
      areaList,
      showDate: false, // 选择生日
      comeColTwo: '',
      comeColOne: '',
      comeColThree: '',
      comeColTwoPlaceholder: '',
      comeColOnePlaceholder: '',
      comeColThreePlaceholder: '',
      columns: ['身份证', '护照', '军官证', '港澳通行证', '台胞通行证'],
      showCodeColumns: [],
      trave_columns: ['飞机', '火车', '轮渡', '自驾', '客运'],
      // sexColumns:['男','女'],
      formData: {
        comeColTwo: '', // 座位号
        comeColThree: '', // 车厢
        comeColOne: '', // 班次
        urgentPname: '', // 紧急联系人姓名
        urgentPhone: '', // 紧急联系人电话
        comeType: '', // 出行交通方式（0飞机 1火车 2轮渡  3自驾  4客运
        comeDalianTime: '', // 预计抵达日期
        startAddrList: '', // 出发地省市区
        endAddrList: '', // 目的地省市区
        certificatesType: '', // 证件类型
        name: '', // 姓名
        certificatesNo: '', // 身份证
        // sex: '', // 性别
        phone: '',
        codename: '',
        // bithday: '', // 出生日期
        registered_residence: '', // 户口所在地
        companion_id: '', // 陪同id new
        healthyCodeStatus: '0', // 健康状态 new
        // uploader: [], //图片list
        comeAddress: '', // 始发地  new
        address: '', // 返连目的地
        isKeyArea: '0', // 途经重点关注地区
        isNucleicAcid: '1', // 持有核酸检测证明
        code: '',
        enter_type: '7', // （7：入连人员自主报备  8：社区自主报备）
        type: '未排查', // 1 未排查  0 无需排查
        end_addr_district: '',
        end_addr_street: '',
        end_addr_community: '',
        isTransfer: 0, // 0否 1是
        end_addr_province: '',
        end_addr_city: '',

        comeProvinceCode: '',
        comeCityCode: '',
        comeAreaCode: '',
        picUrls: '',
        daLianRegisterDtos: [] // 同行人listƒ
      },
      end3: false,
      // options: ssq,
      options: [],
      forArea: area,
      Province: '', // 省
      city: '', // 市
      area: '', // 区
      title: '省', // 标题省  市  区
      show: false, // 城市选择
      pickerShow: false, // 时间选择
      isGetArea: false, // 是否已经获取上车省市区
      showCertificate: false, // 证件类型
      showCode: false, // 社区code
      showTrave: false, // 出行交通方式类型
      showSex: false, // 性别类型
      phoneRules: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
      postData: []
    }
  },
  mounted() {
    ;(this.maxDate = new Date(new Date().setDate(new Date().getDate() + 4))), // 这里是重点
      // this.getTomorrow()
      this.checkZzdl()
    this.initRegionalDivisionJson()
    this.formData.certificatesNo = this.$route.query.idCard
    this.formData.name = this.$route.query.name
    this.formData.phone = this.$route.query.mobile
    this.formData.certificatesType = this.$route.query.cardType
    console.log(areaList)
    this.traveConfirm(null)
    // this.formData.code = this.$route.query.code
    window['getNfcData'] = row => {
      let r = JSON.parse(row)
      Toast.clear()
      // if (!r.id) return Toast.fail('nfc读取失败')

      for (let i in this.formData) {
        this.formData[i] = ''
      }
      // this.formData.code = this.$route.query.code
      this.formData.isNucleicAcid = '1'
      this.formData.isKeyArea = 0

      this.formData.name = r.name || ''
      this.formData.certificatesNo = r.id || ''
      // this.formData.sex = r.sex || ''
      r.birthday = r.birthday.replace('年', '-')
      r.birthday = r.birthday.replace('月', '-')
      r.birthday = r.birthday.replace('日', '')
      this.formData.bithday = r.birthday || ''
      this.formData.registered_residence = r.address || ''
      this.formData.certificatesType = '身份证'
    }
  },
  methods: {
    checkRegisterDtos() {
      var che = true
      try {
        this.formData.daLianRegisterDtos.forEach(function(value, index, array) {
          if (
            array[index].name != '' ||
            array[index].certificatesNo != '' ||
            array[index].phone != ''
          ) {
            if (
              array[index].name == '' ||
              array[index].certificatesNo == '' ||
              array[index].phone == ''
            ) {
              Toast.fail('第' + (index + 1) + '个同行人输入空值有误')
              che = false
            }
          }
        })
      } catch (e) {}
      return che
    },
    pushResidentList() {
      this.formData.daLianRegisterDtos.push({
        // user_info_id: this.$route.query.id,
        name: '',
        certificatesNo: '',
        phone: ''
      })
    },
    removeResident(index) {
      // if (index == 0) {
      //   Toast.fail('不能继续删除')
      //   return
      // }
      this.formData.daLianRegisterDtos.splice(index, 1)
    },
    select() {
      document.activeElement.blur()
    },
    checkZzdl() {
      if (this.zzdl == 0) {
        // 中转大连显示 区街道社区
        this.end3 = true
        this.formData.endAddrList = null
        this.formData.isTransfer = 0
        // this.formData.end_addr_province = null
        // this.formData.end_addr_city = null
        // this.formData.end_addr_district = null
      } else if (this.zzdl == 1) {
        // 中转大连显示 否 省市区
        this.end3 = false
        this.formData.endAddrList = null
        this.formData.isTransfer = 1
        // this.formData.end_addr_district = null
        // this.formData.end_addr_street = null
        // this.formData.end_addr_community = null
      }
    },
    initRegionalDivisionJson() {
      registerOfficeList().then(res => {
        if (res.data.errcode === 0) {
          this.options = JSON.parse(res.data.data)
        } else {
          Toast.fail(res.data.msg)
        }
      })
    },
    // 区街道社区
    onFinish({ selectedOptions }) {
      this.trave_mode_show = false
      this.formData.endAddrList = selectedOptions
        .map(option => option.text)
        .join('/')

      this.formData.end_addr_district = selectedOptions[0].value
      this.formData.end_addr_street = selectedOptions[1].value
      this.formData.end_addr_community = selectedOptions[2].value

      this.formData.end_addr_province = null
      this.formData.end_addr_city = null
    },
    // 省市区
    enAreaConfirm(value) {
      this.showArea2 = false
      this.formData.endAddrList = value
        // .filter((item) => !!item)
        .map(item => item.name)
        .join('/')
      let data = this.formData.endAddrList.split('/')

      console.log(data)
      console.log('value[0].value=======', data[0])
      this.formData.end_addr_province = data[0]
      this.formData.end_addr_city = data[1]
      this.formData.end_addr_district = data[2]
    },
    goYjConfirm(value) {
      const formatDate = value =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.comeDalianTime = yy + '-' + mm + '-' + dd
      this.goYjShow = false
    },
    delImg(index) {
      // 删除指定下标的图片对象
      if (isNaN(index) || index >= this.postData.length) {
        return false
      }
      let tmp = []
      for (let i = 0, len = this.postData.length; i < len; i++) {
        if (this.postData[i] !== this.postData[index]) {
          tmp.push(this.postData[i])
        }
      }
      this.postData = tmp
    },
    dataURLtoFile(dataurl, filename) {
      // 将base64转换为file文件
      // 参数dataurl base64字符串
      // 参数filename	图片名称
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], filename, {
        type: mime
      })
    },
    onRead(files) {
      if (Object.prototype.toString.call(files) !== '[object Array]') {
        files = [files]
      }
      files &&
        files.forEach(file => {
          lrz(file.file, { quality: 0.1 }).then(rst => {
            file.content = rst.base64
            this.postData.push(file) // postData是一个数组
            let data = {
              timestamp: new Date().getTime(),
              fileName: file.file.name,
              filePath: 'house/Wl/register',
              sign: ''
            }
            Toast.loading({
              message: '正在上传，请稍后...',
              forbidClick: true,
              duration: 20000
            })
            getSign(data)
              .then(res => {
                if (res.data.errcode === 0) {
                  data.sign = res.data.data.sign
                  data.file = file.content.split(',')[1]
                  upLoadFiles(data)
                    .then(res => {
                      file.picUrl = res.data.data
                      Toast.clear()
                    })
                    .catch(error => {
                      Toast.clear()
                    })
                } else {
                  Toast.fail(res.data.errmsg)
                }
              })
              .catch(error => {
                Toast.clear()
              })
          })
        })
    },
    getConfirm(value) {
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.bithday = yy + '-' + mm + '-' + dd
      this.showDate = false
    },
    onAreaConfirm(value) {
      this.showArea = false
      console.log('value====', value)
      this.formData.startAddrList = value
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')
      this.formData.comeProvinceCode = value[0].name
      this.formData.comeCityCode = value[1].name
      this.formData.comeAreaCode = value[2].name
    },

    onConfirm(value) {
      this.label = value
      this.formData.certificatesType = value
      this.showCertificate = false
    },
    onCodeConfirm(value) {
      this.formData.code = value.value
      this.formData.codename = value.name
      this.showCode = false
    },

    traveConfirm(value) {
      // this.label = value
      if (!value) {
        // value = '飞机'
        // this.formData.comeType = '飞机'
      }
      this.showTrave = false
      if (value == '飞机') {
        // 飞机
        this.comeColOne = '航班号'
        this.comeColOnePlaceholder = ''
        this.comeColTwo = '座位号'
        this.comeColTwoPlaceholder = ''
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '火车') {
        // 火车
        this.comeColOne = '车次'
        this.comeColOnePlaceholder = '车次(例:2624)'
        this.comeColTwo = '车厢'
        this.comeColTwoPlaceholder = '车厢(例:1车)'
        this.comeColThree = '座位'
        this.comeColThreePlaceholder = '座位(例:01号/01A)'
        this.showTwoLabel = true
        this.showCarriage = true
      } else if (value == '轮渡') {
        // 轮渡
        this.comeColOne = '轮船航班'
        this.comeColOnePlaceholder = '轮船航班(例:1018)'
        this.comeColTwo = '舱位号'
        this.comeColTwoPlaceholder = '舱位号(例:01)'
        // this.comeColThree = '车厢'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '自驾') {
        // 自驾
        this.comeColOne = '车牌信息'
        this.comeColOnePlaceholder = '车牌号(例:辽B00001)'
        this.comeColTwo = '到达收费口'
        this.comeColTwoPlaceholder = '到达收费口(例:大连站)'
        this.showTwoLabel = true
        this.showCarriage = false
      } else if (value == '客运') {
        // 客运
        this.comeColOne = '车牌号'
        this.comeColOnePlaceholder = '车牌号(例:辽B00001)'
        this.comeColTwo = '座位'
        this.comeColTwoPlaceholder = '座位(例:01)'
        this.showTwoLabel = true
        this.showCarriage = false
      }
      this.formData.comeType = value
    },
    goDlConfirm(value) {
      const formatDate = value =>
        `${value.get}/${value.getMonth() + 1}/${value.getDate()}`
      let yy = new Date(value).getFullYear()
      let mm = new Date(value).getMonth() + 1
      let dd = new Date(value).getDate()
      this.formData.comeDalianTime = yy + '-' + mm + '-' + dd
      this.goDlShow = false
    },
    onSexConfirm(value) {
      this.label = value
      this.formData.sex = value
      this.showSex = false
    },
    testNfc() {
      // 测试用户终端
      let u = navigator.userAgent
      let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
      let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

      if (isAndroid) {
        Toast.loading({
          message: '正在识别...',
          forbidClick: true,
          duration: 20000
        })
        window.Android.useNFCReadIdCard('123')
      }
      if (isiOS) {
        return Toast.fail('抱歉\n暂不支持ios')
      }
    },
    onSubmit() {
      if (this.checked == false) {
        Toast.fail('请勾选并同意报备内容正确属实')
        return
      }

      let checkDto = this.checkRegisterDtos()
      console.log('checkDto========', checkDto)
      if (checkDto == false) {
        return
      }
      this.formData.picUrls = ''
      this.$refs.formDataRef.validate().then(() => {
        this.postData.forEach(item => {
          this.formData.picUrls += item.picUrl + ','
        })

        let formdata = JSON.parse(JSON.stringify(this.formData))
        console.log(formdata)
        switch (formdata.comeType) {
          case '飞机':
            formdata.comeType = 0
            break
          case '火车':
            formdata.comeType = 1
            break
          case '轮渡':
            formdata.comeType = 2
            break
          case '自驾':
            formdata.comeType = 3
            break
          case '客运':
            formdata.comeType = 4
            break
          default:
            break
        }

        formdata.companion_id = this.$route.query.id

        let reg = ''
        switch (formdata.certificatesType) {
          case '身份证':
            reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)|(^[HMhm]{1}([0-9]{10}|[0-9]{8})$)/
            if (!reg.test(formdata.certificatesNo)) {
              this.dialogMethod('身份证不合法', 2000)
              return false
            }
            formdata.certificatesType = 0
            break
          case '护照':
            reg = /^([a-zA-z]|[0-9]){5,17}$/
            if (!reg.test(formdata.certificatesNo)) {
              this.dialogMethod('护照不合法', 2000)
              return false
            }
            formdata.certificatesType = 1
            break
          case '军官证':
            reg = /^[CW]\d{8}$/
            if (!reg.test(formdata.certificatesNo)) {
              this.dialogMethod('军官证不合法', 2000)
              return false
            }
            formdata.certificatesType = 2
            break
          case '港澳通行证':
            reg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/
            if (!reg.test(formdata.certificatesNo)) {
              this.dialogMethod('港澳通行证不合法', 2000)
              return false
            }
            formdata.certificatesType = 3
            break
          case '台胞通行证':
            reg = /^([a-zA-z]|[0-9]){5,17}$/
            if (!reg.test(formdata.certificatesNo)) {
              this.dialogMethod('台胞通行证不合法', 2000)
              return false
            }
            formdata.certificatesType = 4
            break
          default:
            return false
        }

        Toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 20000
        })
        helpUserNewInsert(formdata).then(res => {
          Toast.clear()
          if (res.data.errcode === 0) {
            this.$router.push({
              name: 'recordNewQrCode',
              query: {
                certificatesNo: res.data.data.certificatesNo,
                queryCode:
                  res.data.data.queryCode == null ? '' : res.data.data.queryCode
              }
            })
            // 提交成功清空数据
            for (let i in this.formData) {
              this.formData[i] = ''
              this.formData.isKeyArea = 1
            }
          } else {
            Toast.fail(res.data.errmsg)
          }
        })
      })
    },
    checkoutArea(item) {
      if (!this.Province) {
        // 选择省
        this.Province = item.name
        this.forArea = item.child
        this.title = '市'
      } else if (!this.city) {
        // 选择市
        this.city = item.name
        this.forArea = item.child
        this.title = '区'
      } else if (!this.area) {
        // 选择区
        this.area = item
        this.show = false
        this.title = '省'
        // 拼接省市区 展示页面
        this.formData.start_station_addr =
          this.Province + '/' + this.city + '/' + this.area

        this.forArea = area
        // 清空省市区 为了下一次选择省市区
        this.Province = ''
        this.city = ''
        this.area = ''
      }
    },
    dialogMethod(msg, timeOut) {
      Dialog.alert({
        message: msg,
        showCancelButton: false,
        showConfirmButton: false
      }).then(() => {})
      const TIMEOUT = setTimeout(() => {
        Dialog.close()
        clearTimeout(TIMEOUT)
      }, timeOut)
    }
  },
  created() {
    this.llmaxDate = new Date(new Date().setDate(day + 5))
    this.llminDate = new Date(new Date().setDate(day - 15))
  },
  watch: {
    'formData.comeType': {
      handler(newVal, oldVal) {
        this.formData.comeColOne = null
        this.formData.comeColTwo = null
        this.formData.comeColThree = null
        if (newVal == null || newVal == '') {
          return
        }
        var u = window.navigator.userAgent
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // g

        if (this.formData.name == '' || this.formData.name == undefined) {
          this.formData.comeType = ''
          return Toast.fail('请输入姓名')
        }
        if (
          this.formData.certificatesType == '' ||
          this.formData.certificatesType == undefined
        ) {
          this.formData.comeType = ''
          return Toast.fail('请选择证件类型')
        }
        if (
          this.formData.certificatesNo == '' ||
          this.formData.certificatesNo == undefined
        ) {
          this.formData.comeType = ''
          return Toast.fail('请输入证件号')
        }
        if (this.formData.phone == '' || this.formData.phone == undefined) {
          this.formData.comeType = ''
          return Toast.fail('请输入电话号码')
        }

        if (newVal == '飞机') {
          Dialog.confirm({
            title: '温馨提示',
            message: '当前出行方式为：飞机 \n请在跳转后的机场页面进行填报'
          })
            .then(() => {
              var url
              var params = `id=${Date.now()}&name=${
                this.formData.name
              }&cardNo=${this.formData.certificatesNo}&mobile=${
                this.formData.phone
              }`

              // if (xeUtils.locat().protocol == 'http:') {
              //   url = `http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?${params}`
              // } else if (xeUtils.locat().protocol == 'https:') {
              //   url = `https://wssb.dlairport.com/Default3.aspx?${params}`
              // }

              url = `https://wssb.dlairport.com/Default3.aspx?${params}`

              if (!url) {
                return
              }

              if (isAndroid) {
                window.open(
                  // 'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
                  url,
                  '_blank'
                )
              } else {
                window.open(
                  // 'http://wechat.dlairport.com:8800/2019nCoV/Default2.aspx?id=' +
                  url,
                  '_self'
                )
              }
            })
            .catch(() => {
              this.formData.comeType = ''
              this.comeColTwo = ''
              this.comeColOne = ''
              this.showTwoLabel = false
              this.showCarriage = false
            })
        }
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.upload-img-5 {
  margin: 5px 0 90px 0;
}

.upload-img-1 {
  margin: 5px 0 15px 0;
}

.home {
  background: url('../../assets/images/smtb.jpg') no-repeat;

  img {
    // background: url('../../assets/images/smtb.jpg');
    width: 100%;
  }

  .dialog-container {
    height: 70vh;
    overflow-y: auto;
  }

  .get-area {
    width: 100%;
    padding: 0 0.8rem;
    font-size: 0.747rem;
    color: #fff;
    background-color: #1989fa;
    border: 0.053rem solid #1989fa;
    height: 2.347rem;
    line-height: 2.347rem;
    text-align: center;
    border-radius: 0.107rem;
    cursor: pointer;
    box-sizing: border-box;
    margin-right: 10px;
  }

  /deep/ .van-field__label {
    width: 9em;
  }

  /deep/ .van-field__error-message {
    text-align: right;
  }

  .title {
    // font-size: 28px;
    text-indent: 20px;
    padding: 50px 0 20px;
  }

  .container {
    width: 90%;
    height: 80vh;
    overflow-y: auto;
    border: 1px solid #adadad;
    margin: auto;

    .item {
      margin: 10px;
    }
  }
}

.up-and-down {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f1f3f4;
  height: 80px;
  color: #333;
}

.home .blue {
  background-color: transparent;
}

.home .van-cell {
  background-color: transparent;
}
</style>
<style>
input.van-field__control::-webkit-input-placeholder {
  color: #646566;
}

textarea.van-field__control,
.van-field__control::placeholder {
  color: #646566;
  fill: currentColor;
  -webkit-text-fill-color: currentColor;
}
</style>
